<template>
  <div>
    <!-- <router-view v-if="$route.path === '/setting/role/add'"></router-view> -->
    <!-- <router-view v-if="$route.path === '/setting/roleAdd'"></router-view> -->
    <page-layout class="user">
      <!-- {{ $route.path }} -->
      <div class="search-wrapper">
        <div>
          <a-input
            placeholder="请输入角色名称"
            v-model="search_value"
            class="search-input"
          >
            <a-icon
              slot="prefix"
              type="search"
              style="font-size: 28px; color: #999"
            />
          </a-input>
          <a-button type="primary" class="search-button" @click="handelSearch"
            >搜索</a-button
          >
        </div>
        <a-button
          style="width: 120px; height: 54px"
          type="primary"
          @click="
            $router.push({
              path: '/setting/roleAdd',
              query: { random: random }
            })
          "
          >新增</a-button
        >
      </div>

      <!-- <a-card> -->
      <div class="tabel-wrapper">
        <!-- <div class="operator">
          <a-button @click="addNew" type="primary">新建</a-button>
          <a-button>批量操作</a-button>
          <a-dropdown>
            <a-menu @click="handleMenuClick" slot="overlay">
              <a-menu-item key="delete">删除</a-menu-item>
              <a-menu-item key="audit">审批</a-menu-item>
            </a-menu>
            <a-button> 更多操作 <a-icon type="down" /> </a-button>
          </a-dropdown>
        </div> -->
        <standard-table
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :pagination="pagination"
          size="large"
        >
          <div
            slot="permissions"
            slot-scope="{ text }"
            style="max-width: 500px"
          >
            <template v-if="text && text.length > 0">
              <template v-for="(item, index) in text">
                <!-- {{ item }} -->
                <a-tag
                  style="margin-top: 5px"
                  color="blue"
                  v-if="item"
                  :key="index"
                >
                  {{ item || 1 }}
                </a-tag>
              </template>
            </template>
            <a-tag v-else color="#c4c4c4"> 暂无绑定权限 </a-tag>
          </div>
          <div slot="menus" slot-scope="{ text }" style="max-width: 500px">
            <!-- {{ text }} -->
            <template v-if="text && text.length > 0">
              <template v-for="(item, index) in text">
                <a-tag
                  style="margin-top: 5px"
                  color="blue"
                  v-if="item"
                  :key="index"
                >
                  {{ item || 1 }}
                </a-tag>
              </template>
            </template>
            <a-tag v-else color="#c4c4c4"> 暂无绑定菜单 </a-tag>
          </div>
          <div slot="action" slot-scope="{ text, record }">
            <!-- {{ record }} -->
            <!-- <a href="#/task/detail">查看</a>
            <a-divider type="vertical" style="background: #0097e0" /> -->
            <a href="javascript:;" @click="goEdit(record)">编辑</a>
            <a-divider type="vertical" style="background: #0097e0" />
            <a-popconfirm
              title="确定需要删除此角色吗?"
              ok-text="是的"
              cancel-text="取消"
              @confirm="() => confirm(record.key)"
              @cancel="() => cancel(record.key)"
              ><a>删除</a>
            </a-popconfirm>
          </div>
          <template slot="statusTitle">
            <a-icon @click.native="onStatusTitleClick" type="info-circle" />
          </template>
        </standard-table>
      </div>
      <!-- </a-card> -->
    </page-layout>
  </div>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import StandardTable from "@/components/table/StandardTable";
import { getRoles, deleteRoles } from "@/services/roles";
// import moment from "moment";
// import { mapMutations } from "vuex";
const columns = [
  {
    title: "ID",
    dataIndex: "key"
  },
  {
    title: "角色名称",
    dataIndex: "name"
  },
  {
    title: "绑定的权限",
    dataIndex: "permissions",
    scopedSlots: { customRender: "permissions" }
    // align: "center"
  },
  {
    title: "绑定的菜单",
    dataIndex: "menus",
    scopedSlots: { customRender: "menus" }
    // align: "center"
  },
  {
    title: "更多",
    scopedSlots: { customRender: "action" },
    align: "center"
  }
];

export default {
  name: "demand",
  components: { PageLayout, StandardTable },
  data() {
    return {
      random: "",
      record: "",
      desc: "需求管理中心",
      advanced: true,
      columns: columns,
      loading: true, //loading
      dataSource: [], //角色数据列表
      isRouterAlive: false, //控制页面刷新
      search_value: "", //搜索字段
      selectedRows: [],
      pagination: {
        size: "small",
        showSizeChanger: true,
        showQuickJumper: true,
        poposition: "bottom",
        pageSize: 5
        // hideOnSinglePage: true
      }
    };
  },
  authorize: {
    deleteRecord: "delete"
  },
  created() {
    this.random = Math.random();
    this.getRolesData();
  },
  activated() {
    this.random = Math.random();
    this.getRolesData();
  },
  methods: {
    // moment,
    /**获取角色列表 */
    getRolesData(data) {
      this.loading = true;
      getRoles(data)
        .then((res) => {
          this.loading = false;
          this.dataSource = res.data.data;
          if (res.data.code === 20000) {
            this.dataSource = res.data.data.map((item) => {
              // console.log(item);
              const { id, name, permissions, menus } = item;
              let permissionsArr = [];
              for (let key in permissions) {
                console.log(permissions);
                permissionsArr[key] = permissions[key];
              }
              let menusArr = [];
              for (let key in menus) {
                // console.log(key);
                menusArr[key] = menus[key].name;
              }
              // console.log(permissionsArr, menusArr);
              return {
                key: id,
                name: name || "未知",
                permissions: permissionsArr ? permissionsArr : [],
                menus: menusArr ? menusArr : []
              };
            });
          }
        })
        .catch((err) => {
          // console.log(err);
          this.loading = false;
        });
    },

    /**删除角色 */
    deleteRolesData(id) {
      deleteRoles({ id }).then((res) => {
        if (res.data.code == 20000) {
          this.success(res.data.message);
          this.getRolesData();
        }
      });
    },

    // 跳转至修改
    goEdit(value) {
      this.$router.push({
        path: "/setting/roleAdd",
        query: {
          id: value.key,
          random: this.random
        }
      });
    },
    handelSearch() {
      this.getRolesData({ name: this.search_value });
    },
    confirm(key) {
      //删除弹窗确定按钮回调
      console.log(key);
      this.deleteRolesData(key);
    },
    // 提示框
    success(value) {
      this.$message.success(value);
    },
    cancel(key) {
      this.$message.info(`点击了取消,行数为${key + 1}行`);
    }
  }
};
</script>

<style lang="less">
.search-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;

  > div {
    .search-input input {
      padding-left: 45px !important;
    }
    display: flex;
    width: 60%;
    .ant-input-affix-wrapper {
      display: inline-block;
      width: calc(100% - 150px);
      height: 54px !important;
      input {
        height: 100% !important;
      }
      input::-webkit-input-placeholder {
        color: #9999;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #9999;
      }

      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #9999;

        font-size: 17px;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #9999;
      }
    }
    .search-button {
      margin-left: 30px;
      width: 120px;
      height: 54px;
    }
  }
}
.user {
  .tabel-wrapper {
    border-radius: 5px;
    // min-height: 450px;
    background-color: #fff;
    color: #1f1f1f;
    .ant-pagination {
      margin-top: 60px !important;
    }
    tr {
      height: 66px !important;
      // padding-left: 10px;
    }
    .ant-table-thead {
      padding-left: 20px;
      background: #effaff;
      & > tr > th {
        background: #effaff !important;
      }
    }
    .ant-table-tbody {
      padding-left: 20px;
    }
    .ant-table-pagination.ant-pagination {
      float: unset !important;
      text-align: center;
    }
  }
}
</style>
